<template>
  <div id="skillTrainingDetails" class="person-detail">
    <div>
      <van-nav-bar title="技能培训详情" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div class="skillTrainingDetails-video">
      <video-player :videoUrl='course.videoUrl'></video-player>
      <!-- <video width="800" height="600" controls>
        <source v-bind:src="videoUrl" type="video/mp4">
      </video> -->
      <div class="skillTrainingDetails-introduce">
        <p class="skillTrainingDetails-name">
          课程名称
        </p>
        <span>观看{{course.viewCount}}</span>
        <van-icon v-if="course.favoriteFlag" name="good-job-o" color="red" size="16px" class="skillTrainingDetails-icon"
          @click="courseFavourite()" />
        <van-icon v-if="!course.favoriteFlag" name="good-job-o" color="black" size="16px"
          class="skillTrainingDetails-icon" @click="courseFavourite()" />
        <span class="skillTrainingDetails-icon">{{ course.favoriteCount }}</span>
      </div>
    </div>
    <van-tabs v-model="active" background="transparent" title-active-color="#DC4630">
      <van-tab title="简介">
        <div class="skillTrainingDetails-body">
          <div class="skillTrainingDetails-details">
            <p class="skillTrainingDetails-name">{{ course.subject }}</p>
            <p class="skillTrainingDetails-directionDetails">
              上传时间:{{ course.creationDate }}
            </p>
          </div>
          <div class="skillTrainingDetails-details">
            <p class="skillTrainingDetails-name">课程介绍</p>
            <p class="skillTrainingDetails-directionDetails">
              {{ course.description }}
            </p>
          </div>
          <div class="skillTrainingDetails-details">
            <p class="skillTrainingDetails-name">就职方向</p>
            <p class="skillTrainingDetails-directionDetails">
              {{ course.careers }}
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="评论">
        <div class="comment-noComments" v-if="noComments">
          还没有评论哦，赶紧抢先第一个吧
        </div>
        <div v-if="!noComments">
          <div class="comment-head">
            <span>热门评论</span>
            <span @click="timeFlag = true,getComment()">按时间排序</span>
          </div>
          <div v-for="(item, index) in comments" :key="index" class="comment-body">
            <div class="comment-body-name">
              <div>
                <van-image width="50" height="50" :src="item.headImg" round />
              </div>
              <div>
                <p>
                  {{ item.createdBy }}
                </p>
                <p>
                  {{ item.creationDate }}
                </p>
                <div class="comment-body-body">
                  {{ item.content }}
                </div>
              </div>
            </div>
          </div>
          <div class="my-comment-body" v-if="showComment">
            <van-field v-model="myComment" placeholder="添加评论..." @focus="commentFocus()" ref="commentInput">
              <van-button slot="button" size="small" type="primary" @click="confirmpinlun()">确定</van-button>
              <template slot="label">
                <van-image width="40" height="40" :src="myImgUrl" round />
              </template>
            </van-field>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import "video.js/dist/video-js.css";
  import "vue-video-player/src/custom-theme.css";
  import videoPlayer from "./videoPlayer.vue";
  export default {
    name: "skillTrainingDetails",
    components: {
      videoPlayer
    },
    data() {
      return {
        showInput: false,
        noComments: true,
        count: 1110,
        active: 0,
        myComment: "",
        myImgUrl: JSON.parse(localStorage['userInfo']).currentUser.headImg,
        course: '',
        timeFlag: false,
        comments: [],
        videoUrl: '',
        showComment: true,
      };
    },
    computed: {

    },
    created() {},
    mounted() {
      this.getInfo()
    },
    watch: {
      course: {
        handler: function (val) {
          this.videoUrl = val.videoUrl;
        },
        deep: true
      }
    },
    methods: {
      courseFavourite() {
        if (this.course.favoriteFlag) {
          let id = this.course.id
          mine.training_courseFavorite_delete(id).then(res => {
            if (res.code == '0') {
              this.course.favoriteFlag = false
              this.course.favoriteCount--
            }
          })
        } else {
          let id = this.course.id
          mine.training_courseFavorite_courseId(id).then(res => {
            if (res.code == '0') {
              this.course.favoriteFlag = true
              this.course.favoriteCount++
            }
          })
        }
      },
      getComment() {
        let data = {
          courseId: this.course.id
        }
        mine.training_courseComment_tree(data).then(res => {
          if (res.code == '0') {
            if (res.datas.length < 1) {
              this.noComments = true
            } else {
              this.noComments = false
              this.comments = res.datas.records
            }
          }
        })
      },
      confirmpinlun() {
        if (this.myComment == '') {
          return
        }
        let data = {
            "content": this.myComment,
            "courseId": this.course.id,
          },
          that = this
        mine.training_courseComment(data).then(res => {
          if (res.code == '0') {
            that.$toast("评论成功!")
            let user = JSON.parse(localStorage['userInfo']).currentUser
            let obj = {
              content: that.myComment,
              createdBy: user.createdBy,
              createdByName: user.username,
              creationDate: "2020/03/24 16:22:34",
              headImg: user.headImg,
              id: user.id
            }
            that.comments.unshift(obj)
            that.myComment = ''
          }
        })
      },
      getInfo() {
        let data = this.$route.query.id;
        mine.training_course(data).then(res1 => {
          this.isLoading1 = false;
          if (res1.code == "0") {
            if (res1.datas != null) {
              this.course = res1.datas;
              this.videoUrl = this.course.videoUrl
              this.getComment()
            } else {
              this.$toast(res1.msg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      },
      commentFocus() {}
    }
  };
</script>
<style lang="scss">
  #skillTrainingDetails {
    background: #fff;

    .skillTrainingDetails-video {
      .skillTrainingDetails-introduce {
        padding: 10px 20px;

        >span,
        >i {
          margin-top: 10px;
          display: inline-block;
        }

        >span {
          opacity: 0.5;
        }
      }

      .skillTrainingDetails-name {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .skillTrainingDetails-icon {
      float: right;
    }

    i.skillTrainingDetails-icon {
      margin-left: 10px;
    }

    .skillTrainingDetails-body {
      padding: 10px 20px;
    }

    .skillTrainingDetails-details {
      padding: 10px 5px;
    }

    .skillTrainingDetails-name {
      font-size: 16px;
      font-weight: bold;
    }

    p {
      margin: 0;
    }

    .skillTrainingDetails-directionDetails {
      margin-top: 5px;
    }

    .comment-head {
      height: 40px;
      line-height: 40px;
      padding: 10px 20px;

      >span:nth-child(1) {
        font-size: 14px;
        font-weight: bold;
      }

      >span:nth-child(2) {
        float: right;
        font-weight: 300;
      }
    }

    .comment-noComments {
      height: 40px;
      line-height: 40px;
      padding: 20px 40px;
    }

    .comment-body {
      padding: 20px 20px 20px 20px;
      border-bottom: 1px solid #e2e2e2;
    }

    .comment-body-name {
      display: flex;

      >div:nth-child(1) {
        width: 20%;
      }

      >div:nth-child(2) {
        width: 80%;

        >p {
          padding: 2px;
          opacity: .7;
        }

        >p:nth-child(1) {
          font-size: 14px;
        }

        >p:nth-child(2) {
          font-size: 14px;
        }
      }
    }

    .comment-body-body {
      font-size: 14px;
      font-weight: 500;
      padding: 5px;
      word-break: break-word;
    }

    .van-tab span {
      font-size: 14px;
      font-weight: 700;
    }

    .my-comment-body {
      position: fixed;
      top: 90%;
      width: 100%;
      border-top: 1px solid #e2e2e2;
      z-index: 3;
    }
  }
</style>